<template>
	<view>
		<QS-Form label-position="left" label-width="120rpx" ref="form" :rules="rules">
			<QS-Form-Item label="测试" required>
				<QS-Input prop="input"></QS-Input>
			</QS-Form-Item>
			<QS-Form-Item label="测试2" required>
				<QS-Input prop="textarea" type="textarea"></QS-Input>
			</QS-Form-Item>
			<QS-Form-Item label="地址" required>
				<QS-Input prop="address"></QS-Input>
			</QS-Form-Item>
			<QS-Form-Item label="单选" required>
				<QS-Radio prop="radio" :itemArray="radioArray"></QS-Radio>
			</QS-Form-Item>
			<QS-Form-Item label="多选" required>
				<QS-Checkbox prop="checkbox" :itemArray="checkboxArray"></QS-Checkbox>
			</QS-Form-Item>
			<QS-Form-Item label="switch">
				<QS-Switch prop="switch"></QS-Switch>
			</QS-Form-Item>
		</QS-Form>
		<QS-P height="40px"></QS-P>
		<QS-Button theme="primary" @click="submit">获取表单数据</QS-Button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					test: {
						minLength: 2,
						maxLength: 5,
						message: '测试长度需在2-5之间'
					}
				},
				radioArray: [
					{ name: '测试1', value: '测试1' },
					{ name: '测试2', value: '测试2' },
					{ name: '测试3', value: '测试3' },
				],
				checkboxArray: [
					{ name: '测试1', value: '测试1' },
					{ name: '测试2', value: '测试2' },
					{ name: '测试3', value: '测试3' },
				]
			}
		},
		methods: {
			submit() {
				this.$refs.form.submit()
					.then(res => {
						console.log('res', res);
						uni.$qs.toast('获取表单数据成功')
					})
					.catch(err => {
						console.log('err', err);
						uni.$qs.toast(err.message);
					})
			}
		}
	}
</script>

<style>

</style>
